<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="120px"
    v-loading="formLoading"
    class="project_create"
  >
    <el-form-item label="项目名称" prop="projectName">
      <el-input v-model="formData.projectName" style="width: 200px" placeholder="请输入项目名称" />
    </el-form-item>
    <el-form-item label="项目经理" prop="projectManagerId">
      <el-select v-model="formData.projectManagerId" placeholder="请选择项目经理" clearable>
        <el-option
          v-for="dict in data.userList"
          :key="dict.id"
          :label="dict.nickname"
          :value="dict.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="项目开始时间" prop="startDate">
      <el-date-picker
        clearable
        v-model="formData.startDate"
        type="datetime"
        value-format="x"
        placeholder="请选择项目开始时间"
      />
    </el-form-item>
    <el-form-item label="项目结束时间" prop="endDate">
      <el-date-picker
        clearable
        v-model="formData.endDate"
        type="datetime"
        value-format="x"
        placeholder="请选择项目结束时间"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
  // import * as LeaveApi from '/@/api/bpm/leave';
  import { userSelect } from '/@/api/backs/system/user';
  import { useTagsViewStore } from '/@/store/modules/tagsView';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { ref, reactive, unref } from 'vue';
  import { addApproval } from '/@/api/backs/workFlow/operation';
  import { useTabs } from '/@/hooks/web/useTabs';
  const { closeCurrent } = useTabs();
  defineOptions({ name: 'BpmOALeaveCreate' });
  const data = reactive({
    userList: [],
  });
  userSelect({}).then((res) => {
    data.userList = res;
  });
  const { delView } = useTagsViewStore(); // 视图操作
  const { currentRoute } = useRouter(); // 路由
  const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formData = ref({
    projectManagerId: undefined,
    projectName: undefined,
    startDate: undefined,
    endDate: undefined,
  });
  const formRules = reactive({
    projectManagerId: [{ required: true, message: '项目经理不能为空', trigger: 'blur' }],
    projectName: [{ required: true, message: '项目名称不能为空', trigger: 'change' }],
    startDate: [{ required: true, message: '项目开始时间不能为空', trigger: 'change' }],
    endDate: [{ required: true, message: '项目结束时间不能为空', trigger: 'change' }],
  });
  const formRef = ref(); // 表单 Ref
  /** 提交表单 */
  const submitForm = async () => {
    // 校验表单
    if (!formRef.value) return;
    const valid = await formRef.value.validate();
    if (!valid) return;
    // 提交请求
    formLoading.value = true;
    try {
      const data = formData.value;
      data.startDate = data.startDate * 1;
      data.endDate = data.endDate * 1;
      await addApproval(data);
      closeCurrent();
      message.success('发起成功');
      // 关闭当前 Tab
      delView(unref(currentRoute));
    } finally {
      formLoading.value = false;
    }
  };
</script>
<style lang="less">
  .project_create {
    padding: 16px;
  }
</style>
